<div class="animated fadeIn">
  <div class="card">
    <div class="card-header">
      Bootstrap Tooltips
      <div class="card-header-actions">
        <a href="https://valor-software.com/ngx-bootstrap/#/tooltip" target="_blank">
          <small className="text-muted">docs</small>
        </a>
      </div>
    </div>
    <div class="card-body">
      <button type="button" class="btn btn-primary"
              tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Simple demo
      </button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Tooltips <small>positioning</small>
    </div>
    <div class="card-body">
      <button type="button" class="btn btn-default btn-secondary"
              tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              placement="top">
        Tooltip on top
      </button>

      <button type="button" class="btn btn-default btn-secondary"
              tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              placement="right">
        Tooltip on right
      </button>

      <button type="button" class="btn btn-default btn-secondary"
              tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              placement="auto">
        Tooltip auto
      </button>

      <button type="button" class="btn btn-default btn-secondary"
              tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              placement="left">
        Tooltip on left
      </button>

      <button type="button" class="btn btn-default btn-secondary"
              tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              placement="bottom">
        Tooltip on bottom
      </button>
    </div>
</div>
  <div class="card">
    <div class="card-header">
      Tooltips <small>dismissible</small>
    </div>
    <div class="card-body">
      <button type="button" class="btn btn-success"
              tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              triggers="focus">
        Dismissible tooltip
      </button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Tooltips <small>dynamic content</small>
    </div>
    <div class="card-body">
      <button type="button" class="btn btn-info" [tooltip]="content">
        Simple binding
      </button>

      <ng-template #tolTemplate>Just another: {{content}}</ng-template>
      <button type="button" class="btn btn-warning" [tooltip]="tolTemplate">
        TemplateRef binding
      </button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Tooltips <small>dynamic html</small>
    </div>
    <div class="card-body">
      <ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div></ng-template>
      <button type="button" class="btn btn-success"
              [tooltip]="popTemplate">
        Show me tooltip with html
      </button>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Tooltips <small>append to <code>body</code></small>
    </div>
    <div class="card-body">
      <div class="row" style="position: relative; overflow: hidden; padding-top: 10px;">
        <div class="col-xs-12 col-12">
          <button type="button" class="btn btn-danger"
                  tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
            Default tooltip
          </button>
          <button type="button" class="btn btn-success"
                  tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                  container="body">
            Tooltip appended to body
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Tooltips <small>custom triggers</small>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-xs-6 col-6">
          <p>Desktop</p>
          <button type="button" class="btn btn-info"
                  tooltip="I will hide on click"
                  triggers="mouseenter:click">
            Hover over me!
          </button>
        </div>

        <div class="col-xs-6 col-6">
          <p>Mobile</p>
          <button type="button" class="btn btn-info"
                  tooltip="I will hide on click"
                  triggers="click">
            Click on me!
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      Tooltips <small>manual triggers</small>
    </div>
    <div class="card-body">
      <p>
  <span tooltip="Hello there! I was triggered manually"
        triggers="" #pop="bs-tooltip">
  This text has attached tooltip
  </span>
      </p>

      <button type="button" class="btn btn-success" (click)="pop.show()">
        Show
      </button>
      <button type="button" class="btn btn-warning" (click)="pop.hide()">
        Hide
      </button>
    </div>
  </div>
</div>
